<script setup>
import { ref, watch } from 'vue'
import ComprehensiveCourses from './ComprehensiveCourses.vue'
import LatestCourses from './LatestCourses.vue'
import PopularCourses from './PopularCourses.vue'
import MoreCourses from "./MoreCourses.vue";

const activeOrder = ref('com')

const orderOptions = ref([
  { key: 'com', label: '综合' },
  { key: 'new', label: '最新' },
  { key: 'pop', label: '人气' },
  { key: 'more', label: '更多' },
])

// 为每个组件添加一个key，用于强制重新渲染
const componentKey = ref(0)

// 监听activeOrder的变化，当变化时更新componentKey
watch(activeOrder, () => {
  componentKey.value++
})

const getCurrentComponent = () => {
  switch (activeOrder.value) {
    case 'com':
      return ComprehensiveCourses
    case 'new':
      return LatestCourses
    case 'pop':
      return PopularCourses
    case 'more':
      return MoreCourses
    default:
      return ComprehensiveCourses
  }
}
</script>

<template>
  <div class="ad">
    <img src="../assets/img/ad.png" style="width: 100%;" />
  </div>
  <div class="courses">
    <div class="head clear" style="height: 60px; line-height: 60px; color: #1B1C20; font-size: 16px;">
      <ul class="order" style="float: left; margin-left: 10px; list-style: none; padding: 0; margin: 0;">
        <li
            v-for="option in orderOptions"
            :key="option.key"
            :class="{ active: activeOrder === option.key }"
            @click="activeOrder = option.key"
            style="float: left; padding: 0px 10px; cursor: pointer;"
            :style="{ fontWeight: activeOrder === option.key ? 'bold' : 'normal' }"
        >
          {{ option.label }}
        </li>
      </ul>
    </div>
    <!-- 根据选择展示不同的组件，并添加key以强制重新渲染 -->
    <component :is="getCurrentComponent()" :key="componentKey"></component>
  </div>
</template>

<style scoped>
.clear::after {
  content: '';
  display: block;
  clear: both;
}
</style>
